{% extends 'dashboard/base.html' %}

{% block title %}{% if is_add %}添加用户{% else %}编辑用户 - {{ user_obj.username }}{% endif %} - 巧巧点餐管理后台{% endblock %}

{% block content %}
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">{% if is_add %}添加用户{% else %}编辑用户 - {{ user_obj.username }}{% endif %}</h1>
    <a href="{% url 'dashboard:user_list' %}" class="btn btn-light btn-sm">
        <i class="fas fa-arrow-left fa-sm"></i> 返回列表
    </a>
</div>

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">{% if is_add %}用户信息{% else %}编辑信息{% endif %}</h6>
    </div>
    <div class="card-body">
        <form method="post" action="{% if is_add %}{% url 'dashboard:user_add' %}{% else %}{% url 'dashboard:user_edit' user_id=user_obj.id %}{% endif %}">
            {% csrf_token %}
            
            <div class="row">
                <div class="col-md-6">
                    <!-- 基本信息 -->
                    <div class="form-group">
                        <label for="username" class="required">用户名</label>
                        <input type="text" id="username" name="username" class="form-control" value="{{ user_obj.username|default:'' }}" required {% if not is_add %}readonly{% endif %}>
                        <small class="form-text text-muted">{% if is_add %}用户登录系统的唯一标识符，创建后不可修改{% else %}用户名不可修改{% endif %}</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="password">{% if is_add %}密码{% else %}重置密码{% endif %}</label>
                        <input type="password" id="password" name="password" class="form-control" {% if is_add %}required{% endif %}>
                        <small class="form-text text-muted">{% if is_add %}用户的登录密码，请使用强密码{% else %}如需重置密码，请在此输入新密码，留空则保持不变{% endif %}</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="role">用户角色</label>
                        <select id="role" name="role" class="form-control">
                            <option value="customer" {% if user_obj.role == 'customer' or not user_obj.is_staff %}selected{% endif %}>顾客</option>
                            <option value="staff" {% if user_obj.role == 'staff' and user_obj.is_staff and not user_obj.is_superuser %}selected{% endif %}>员工</option>
                            <option value="admin" {% if user_obj.role == 'admin' or user_obj.is_superuser %}selected{% endif %}>管理员</option>
                        </select>
                        <small class="form-text text-muted">管理员可以管理所有内容，员工仅可处理订单，顾客无后台权限</small>
                    </div>
                    
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" id="is_active" name="is_active" class="custom-control-input" {% if user_obj.is_active|default:True %}checked{% endif %}>
                            <label for="is_active" class="custom-control-label">启用账户</label>
                        </div>
                        <small class="form-text text-muted">禁用账户后，用户将无法登录系统</small>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <!-- 详细信息 -->
                    <div class="form-group">
                        <label for="first_name">名字</label>
                        <input type="text" id="first_name" name="first_name" class="form-control" value="{{ user_obj.first_name|default:'' }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="last_name">姓氏</label>
                        <input type="text" id="last_name" name="last_name" class="form-control" value="{{ user_obj.last_name|default:'' }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email" class="form-control" value="{{ user_obj.email|default:'' }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">手机号</label>
                        <input type="text" id="phone" name="phone" class="form-control" value="{{ user_obj.phone|default:'' }}">
                    </div>
                </div>
            </div>
            
            <div class="mt-4 border-top pt-4 d-flex justify-content-end">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save fa-sm"></i> 保存用户
                </button>
                <a href="{% url 'dashboard:user_list' %}" class="btn btn-light ml-2">取消</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function() {
        // 表单验证
        $('form').on('submit', function(event) {
            const username = $('#username').val().trim();
            const password = $('#password').val();
            const isAdd = "{{ is_add }}" === "True";
            
            let isValid = true;
            let errorMessage = '';
            
            if (!username) {
                errorMessage += '请输入用户名\n';
                isValid = false;
            }
            
            if (isAdd && !password) {
                errorMessage += '请输入密码\n';
                isValid = false;
            }
            
            if (!isValid) {
                event.preventDefault();
                alert('表单验证失败：\n' + errorMessage);
            }
        });
    });
</script>
{% endblock %} 